<template>
  <div id="app">
  	<button @click="switchClick(0)">one</button>
  	<button @click="switchClick(1)">two</button>
  	<button @click="switchClick(2)">three</button>
  	
  	<!--<keep-alive>标签包裹的组件，创建之后不执行销毁，被缓存-->
  	<keep-alive>
  		<!--<component is="组件名"> 等价于v-if的效果-->
  		<component :is="comName"></component>
  	</keep-alive>
  	
  </div>
</template>

<script>
import one from "./com/one.vue"
import two from "./com/two.vue"
import three from "./com/three.vue"

export default {
  name: 'app',
  data () {
    return {
      comName: one.name
    }
  },
  methods:{
  	switchClick(flag){
  		switch(flag){
  			case 0: this.comName = one.name;break;
  			case 1: this.comName = two.name;break;
  			case 2: this.comName = three.name;break;
  		}
  	}
  },
  components: {
  	[one.name]: one,
  	[two.name]: two,
  	[three.name]: three
  }
}
</script>

<style>

</style>
